<template>
  <div id="goods_list">

    <HeaderStatus></HeaderStatus>
    <div class="mui-content" style="padding-top: 0;">
      <div class="youhui_search">
        <input type="search"  @keyup="search_fun(event)" placeholder="请输入商品名称搜索...">
        <i class="mui-icon mui-icon-closeempty"  ></i>
      </div>

      <div class="search-group-list">

        <div class="item" @tap="open_detail(i.goodsid,i.sid)"  v-for="(i,k) in goods_list" :key="k">
          <div class="img fl">
            <img :src="i.pic " style="height: 100%;" alt="">
          </div>
          <div class="info fl">
            <span class="title"><span   class="title_text"> {{i.name}}</span><span class="fr sale_num">销量：{{i.sales}}</span></span>
            <span class="des"> </span>
            <div class="bottom">
              <div class="price">
                <span class="old_price"> <del>￥{{i.min_price}}</del> </span><br>
                <span class="sale_price">￥{{i.money}}</span>
              </div>
              <!--<span class="fr btn_pintuan" @click="go_detail(i.sid)" v-if="i.as">立即拼团</span>-->
              <span class="fr btn_pintuan" >立即拼团</span>
              <!--<span class="fr btn_pintuan" v-if="!i.as" style="background: #aaa !important;" >拼团已结束</span>-->
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>
<script>
  import HeaderStatus from "../../components/Header";
  import goods_ajax from "../../ajax/goods_ajax"
  import util from "../../tools/util";
  export default {
    name: "goods_list",
    components: {
      HeaderStatus
    },
    data() {
      return {
        goods_list: [],
        header_text: ""
      };
    },
    methods:{
      open_detail(goodsid,sid){
        if(!(goodsid&&sid)){
          mui.toast("缺少goodsid或sid")
          return;
        }
        this.$router.push("/shop/goods_list/goods?goodsid="+goodsid+"&sid="+sid)
      },
      goods_data_init(){
        goods_ajax.get_group_goods_list({
          bid:this.$store.state.account.community.sqid,
        },res=>{
          if(res.length>0){
            this.goods_list=res;
          }
        })
      }
    },
    created() {

      this.header_text = this.$store.state.common.shop_home_chanel_names[1].title;
      this.goods_data_init();
      // 接收到参数后再初始化头部
      this.$store.commit("change_header", {
        header_text: this.header_text,
        header_right_func: false,
        header_right_html: "<span></span>",
        header_back_btn: true
      });
    },
    mounted() {

    }
  };

  function pullfresh_function() {
    setTimeout(() => {
      mui.toast("已刷新");
      mui("#goods_list_reset")
        .pullRefresh()
        .endPulldown();
    }, 500);
  }
</script>
<style lang="less" scoped>

  body,
  html,
  .mui-content {
    font-family: "微软雅黑";
    background-color: #FFFFFF;
    padding-bottom: 6.4rem;
    padding-top: 0.5973rem;
  }
  .mui-bar {
    border-bottom: 1px solid #c5c5c5;
  }
  .mui-bar .mui-segmented-control {
    top: 0;
  }
  .mui-segmented-control.mui-scroll-wrapper {
    height: 44px;
  }
  .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
    height: 44px;
  }
  .mui-action-back {
    height: 44px;
    width: 44px;
  }
  .mui-action-back img {
    width: 100%;
  }
  .mui-title {
    height: 44px;
  }
  .nav {
    width: 1000px;
  }
  .fr {
    float: right;
  }
  .fl {
    float: left;
  }
  .mui-bar {
    top: 0.8533rem;
    font-size: 0.7253rem;
  }
  .hr_20 {
    height: 0.4267rem;
    background-color: #f6f6f6;
  }
  .ptsp_top_stats {
    height: 0.9387rem;
    width: 100%;
    z-index: 20;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
  }
  .youhui_search {
    background-color: #f6f6f6;
    padding: 0.4267rem 0.64rem;
    position: relative;
  }
  .youhui_search input {
    height: 1.1947rem;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: 0 0 5px #aaa;
    border-radius: 0.5973rem;
    background-image: url(../../assets/images/search_03.png);
    background-color: #FFFFFF;
    text-align: left;
    background-repeat: no-repeat;
    background-position: 0.4267rem;
    padding-left: 1.1733rem;
    font-size: 0.512rem;
    background-size: 0.512rem 0.512rem;
  }
  .youhui_search i {
    position: absolute;
    top: 0.512rem;
    right: 1.0667rem;
  }
  .search-group-list {
    padding-left: 0.64rem;
    padding-right: 0.64rem;
    border-bottom: 1px solid #efefef;
  }
  .search-group-list .item {
    padding-top: 0.4267rem;
    padding-bottom: 0.4267rem;
    border-bottom: 1px solid #efefef;
    overflow: hidden;
  }
  .search-group-list .item .img {
    width: 3.2853rem;
    height: 3.2853rem;
    background-color: #ccc;
    margin-right: 0.768rem;
    overflow: hidden;
  }
  .search-group-list .item .img img {
    width: 100%;
  }
  .search-group-list .item .info {
    width: 10.6333rem;
    position: relative;
    height: 3.2853rem;
  }
  .search-group-list .item .info .title {
    font-size: 0.64rem;
    color: #313030;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .search-group-list .item .info .title span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-group-list .item .info .title .title_text {
    width: 5.3333rem;
  }
  .search-group-list .item .info .title .sale_num {
    width: 2.9867rem;
    font-size: 0.512rem;
    color: #646464;
    text-align: right;
  }
  .search-group-list .item .info .des {
    font-size: 0.512rem;
    color: #646464;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-group-list .item .info .star i {
    display: inline-block;
    width: 0.4693rem;
    height: 0.4693rem;
    background-size: 100% 100%;
    background-image: url(../../assets/images/star_05.png);
    margin-left: 0.064rem;
  }
  .search-group-list .item .info .star .light {
    background-image: url(../../assets/images/star_03.png);
  }
  .search-group-list .item .info .bottom {
    font-size: 0.4693rem;
    width: 100%;
    color: #6c6c6c;
    position: absolute;
    line-height: 0.5547rem;
    bottom: 0;
    left: 0;
  }
  .search-group-list .item .info .bottom .old_price {
    font-size: 0.384rem;
  }
  .search-group-list .item .info .bottom .price {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .search-group-list .item .info .bottom .sale_price {
    clear: both;
    font-size: 0.5973rem;
    color: #1c83fc;
  }
  .search-group-list .item .info .bottom .btn_pintuan {
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
    width: 2.8373rem;
    height: 1.1733rem;
    text-align: center;
    line-height: 1.1733rem;
    color: #FFFFFF;
    border-radius: 5px;
  }
  .search-group-list .item:last-child {
    border-bottom: none;
  }
  .mui-bar-nav ~ .mui-content {
    padding-top: 40px;
  }

</style>

